<template>
    <div class="box">
        <h1>Provide Inject</h1>
        <div>content1: {{ content1 }}</div>
        <div>content2.name: {{ content2.name }}</div>
        <button @click="changeContent1">修改content1</button>
        <button @click="changeContent2">修改content2</button>
        <Child></Child>
    </div>
</template>

<script>
import Child from "./Child";
export default {
    name: "ProvideInjectTest",
    components: {
        Child,
    },
    provide() {
        return {
            dream1: this.content1,
            dream2: this.content2,
        }
    },
    data() {
        return {
            content1: "jack",
            content2: {
                name: "tom",
            },
            
        };
    },
    methods: {
                changeContent1() {
                    this.content1 = 'rose'
                },
                changeContent2() {
                    // this.content2 = {
                    //     name: 'jerry'
                    // }

                    this.content2.name = 'arerfa'
                }
            }
};
</script>

<style lang="less" scoped>
</style>
